<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object的defineProperty()</title>
</head>
<body>

<!--

    Object.defineProperty()
    1.这个方法是ES5新增的
    2.这个方法的作用是，给对象新增属性，或者设置对象原有的小黄
    3.怎么用?
        Object.defineProperty(给哪个对象新增属性，'新增的这个属性名称叫啥' ， {给新增的属性设置相关的配置项key:value对})
    4.第三个参数是属性相关的配置项，配置项有哪些?每个配置项的作用是啥?
        value 配置项:给属性指定值
        writable 配置项：设置该属性的值是否可以被修改.true表示可以修改,false,表示不能修改
        getter方法 配置项：不需要我们手动调用的,当读取属性值的时候,getter方法被自动调用
            *getter方法的返回值非常重要,这个返回值就代表这个属性他的值
        setter方法,配置项：不需要我们手动调用,当修改属性值的时候,setter方法被自动调用
            *setter方法上是有一个参数的,这个参数可以接受传过来的值
        注意：当配置项当中有setter和getter的时候,value和writable配置项都不能存在

-->

<script>
    //这是一个普通的对象
    let phone = {}
    //临时变量
    let temp

    //给上面的phone对象新增一个color属性
    Object.defineProperty(phone , 'color' , {
        // value : '太空灰',
        // writable : false,
        //getter方法配置项
        get : function (){
            console.log('getter方法执行了@@')
            //不能使用这种方式调用,因为这样会形成死循环【这是js语言本身的缺陷】
            // return this.color
            return temp
        },
        //setter方法配置项
        set : function (val){
            console.log('setter方法执行了@@' , val)
            //这样的话会一直递归的调用get , 就会形成死循环 【其实我觉得这是语言本身的缺陷,更加说明了,这个世界上没有完美的事情】
            // this.color = val
            temp = val
        }
    })

    //必须要先set再get

    phone.color = 'red'
    //当调用 phone.color的时候会自动调用get方法
    console.log(phone.color)




</script>

</body>
</html>